<template>
  <div>
    <el-scrollbar>
      <el-menu :default-openeds="['1']">
        <el-menu-item-group>
          <RouterLink to="/">
            <el-menu-item index="1">
              <el-icon><House /></el-icon> 首页
            </el-menu-item>
          </RouterLink>
        </el-menu-item-group>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><message /></el-icon>菜单一
          </template>
          <RouterLink to="/login">
            <el-menu-item index="2-1">模拟登录</el-menu-item>
          </RouterLink>
          <RouterLink to="/dashboard">
            <el-menu-item index="2-1">需要权限</el-menu-item>
          </RouterLink>
          <RouterLink to="/info">
            <el-menu-item index="2-1">信息管理</el-menu-item>
          </RouterLink>

          <el-menu-item index="2-2">入库管理</el-menu-item>
          <el-menu-item index="2-3">出库管理</el-menu-item>
          <el-menu-item index="2-4">项目管理</el-menu-item>
          <el-menu-item index="2-5">材料管理</el-menu-item>
          <el-menu-item index="2-6">统计查询</el-menu-item>
          <el-menu-item index="2-7">供应商管理</el-menu-item>
          <el-menu-item index="2-8">财务管理</el-menu-item>
          <el-menu-item index="2-9">财务管理</el-menu-item>
          <el-menu-item index="2-10">
            <RouterLink to="/about">*关于*</RouterLink>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><icon-menu /></el-icon>菜单二
          </template>
          <el-menu-item-group>
            <template #title>组别1</template>
            <el-menu-item index="3-1">菜单1</el-menu-item>
            <el-menu-item index="3-2">菜单2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="组别2">
            <el-menu-item index="3-3">菜单3</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="3-4">
            <template #title>组别4</template>
            <el-menu-item index="3-4-1">菜单4-1</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon><setting /></el-icon>菜单三
          </template>
          <el-menu-item-group>
            <template #title>组别1</template>
            <el-menu-item index="4-1">待定1</el-menu-item>
            <el-menu-item index="4-2">待定2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="组别2">
            <el-menu-item index="4-3">待定3</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="4-4">
            <template #title>待定4</template>
            <el-menu-item index="4-4-1">待定4-1</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
// 引入icon图标
import { Menu as IconMenu, Message, Setting, House } from '@element-plus/icons-vue'

import { RouterLink } from 'vue-router'
</script>
<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
